<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormRules } from "element-plus";
import { useTable } from "@/hook/useTable";
const { gameV2Options, getSelectV2Games } = useTable();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});
/**
 * 表单值
 */
const form = ref({
  ...props.item
});
const rules = reactive<FormRules>({
  deviceId: [
    {
      required: true,
      message: "请输入设备ID"
    }
  ],
  gameCode: [
    {
      required: true,
      message: "请选择游戏"
    }
  ],
  deviceOs: [
    {
      required: true,
      message: "请输入操作系统"
    }
  ],
  weight: [
    {
      required: true,
      message: "请输入设备权重"
    }
  ]
});
/**
 * 初始化加载
 */
async function onLoad() {
  // 获取接单游戏
  getSelectV2Games();
}
/**
 * ref
 */
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}
function getFormData() {
  return form.value;
}
/**
 * 弹窗 表单所需的ref
 */
defineExpose({
  getRef,
  getFormData
});
/**
 * created
 */
onLoad();
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      label-width="120px"
      label-position="left"
      :model="form"
      :rules="rules"
      class="search-form"
    >
      <el-form-item label="设备ID: " prop="deviceId">
        <el-input v-model="form.deviceId" readonly />
      </el-form-item>
      <el-form-item label="所属游戏: " prop="gameCode">
        <el-select-v2
          v-model="form.gameCode"
          :options="gameV2Options"
          clearable
          filterable
          placeholder="请选择游戏编码"
        />
      </el-form-item>
      <el-form-item label="操作系统: " prop="deviceOs">
        <el-input
          v-model.number="form.deviceOs"
          placeholder="请输入操作系统, 例如: android"
        />
      </el-form-item>
      <el-form-item label="设备权重: " prop="weight">
        <el-input-number
          v-model.number="form.weight"
          :min="0"
          :max="1000"
          placeholder="请输入设备权重, 数值越大权重越高"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;
}
</style>
